<template>
    <div class="work-order-cancel">
      <h2>撤销工单</h2>
      
      <!-- 待撤销工单表格 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>待撤销工单</span>
          </div>
        </template>
        <el-table
          :data="pendingWorkOrders"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          ref="workOrderTable"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="工单ID" width="100"></el-table-column>
          <el-table-column prop="title" label="工单标题" width="200"></el-table-column>
          <el-table-column prop="status" label="状态" width="100"></el-table-column>
          <el-table-column prop="created_at" label="创建时间"></el-table-column>
        </el-table>
      </el-card>
  
      <!-- 撤销按钮 -->
      <div style="margin-top: 20px; text-align: right">
        <el-button type="danger" @click="openCancelDialog" :disabled="selectedWorkOrderIds.length === 0">撤销</el-button>
      </div>
  
      <!-- 撤销确认警告窗口 -->
      <el-dialog
        v-model="dialogVisible"
        title="确认撤销"
        width="30%"
      >
        <span>确定要撤销以下工单吗？</span>
        <div style="margin-top: 15px">
          <el-tag v-for="id in selectedWorkOrderIds" :key="id" style="margin-right: 10px">{{ id }}</el-tag>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="danger" @click="submitCancel">确认撤销</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  // 定义工单接口
  interface WorkOrder {
    id: string
    title: string
    status: string
    created_at: string
  }
  
  // 待撤销工单列表（模拟数据）
  const pendingWorkOrders = ref<WorkOrder[]>([
    { id: 'WO-001', title: '系统维护工单', status: '进行中', created_at: '2023-10-01' },
    { id: 'WO-002', title: '用户反馈工单', status: '进行中', created_at: '2023-10-02' },
    { id: 'WO-003', title: '功能优化工单', status: '进行中', created_at: '2023-10-03' }
  ])
  
  // 选中的工单ID列表
  const selectedWorkOrderIds = ref<string[]>([])
  
  // 弹窗显示状态
  const dialogVisible = ref(false)
  
  // 表单引用
  const workOrderTable = ref()
  
  // 处理表格选择变化
  const handleSelectionChange = (selection: WorkOrder[]) => {
    selectedWorkOrderIds.value = selection.map(item => item.id)
  }
  
  // 打开撤销确认弹窗
  const openCancelDialog = () => {
    if (selectedWorkOrderIds.value.length === 0) {
      ElMessage.warning('请至少选择一个工单')
      return
    }
  
    dialogVisible.value = true
  }
  
  // 提交撤销
  const submitCancel = () => {
    ElMessageBox.confirm(
      '确定要撤销这些工单吗？撤销后将无法恢复。',
      '警告',
      {
        confirmButtonText: '确认撤销',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      ElMessage.success('工单撤销成功！')
      dialogVisible.value = false
      resetForm()
    }).catch(() => {
      ElMessage.info('撤销已取消')
    })
  }
  
  // 重置表单和选择
  const resetForm = () => {
    selectedWorkOrderIds.value = []
    workOrderTable.value?.clearSelection()
  }
  </script>
  
  <style scoped>
  .work-order-cancel {
    padding: 20px;
  }
  
  .box-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>